<template>
    <div>
        <h1>显示</h1>
        <a href="/Add">添加</a>
        <br>
        会员名称: <input type="text" v-model="find.name">
        会员等级:
        <select v-model="find.levid">
                            <option value="0">请选择</option>
                            <option v-for="d in finds" :value="d.Id">{{ d.Name }}</option>
                        </select>
        会员性别 :
        <select v-model="find.sex">
            <option :value="null">请选择</option>
            <option :value="true">男</option>
            <option :value="false">女</option>
        </select>
        <input type="button" value="查询" @click="listshow">
        <input type="button" value="清空" @click="qk">
        <input type="button" value="批量删除" @click="Delps">
        <table class="table">
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" v-model="qx" @change="qxqs">
                    </th>
                    <th>会员编号</th>
                    <th>会员名称</th>
                    <th>性别</th>
                    <th>会员等级</th>
                    <th>会员爱好</th>
                    <th>爱好数量</th>
                    <th>图片</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="d in data">
                    <td>
                        <input type="checkbox" v-model="ids" :value="d.Id">
                    </td>
                    <td>{{d.Id}}</td>
                    <td>{{d.Name}}</td>
                    <td>{{d.Sex==true?"男":"女"}}</td>
                    <td>{{d.Lname}}</td>
                    <td>{{d.HoubbyString}}</td>
                    <td>{{d.HoubbyCount}}</td>
                    <td>
                        <img :src="'https://localhost:7165/'+d.img" style="width: 100px;height: 100px;">
                    </td>
                    <td>
                        <input type="button" value="编辑" @click="GetUpt(d.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <span>
            一共{{ fysy.totalnum }}条,分为{{ fysy.totalpage }}页,
            每页显示{{ find.pagesize }}条,当前是{{ find.pageindex }}页
        </span>
        <input type="button" value="首页" @click="FY(1)">
        <input type="button" value="上一页" @click="FY(find.pageindex-1)">
        <input type="button" v-for="d in fysy.totalpage" :value="d" @click="FY(d)">
        <input type="button" value="下一页" @click="FY(Number(find.pageindex)+1)">
        <input type="button" value="尾页" @click="FY(fysy.totalpage)">

        每页显示:
        <select v-model="find.pagesize" @change="listshow">
            <option value="2">2条/页</option>
            <option value="3">3条/页</option>
            <option value="4">4条/页</option>
            <option value="5">5条/页</option>
        </select>
        前往:
        <input type="number" v-model="find.pageindex">
        <input type="button" value="前往" @click="Shows">
    </div>
</template>

<script setup lang="ts">
import {ref,onMounted} from 'vue';
import axios from 'axios';
import { useInfoStore } from '@/stores/info';
import { useRouter } from 'vue-router';

//pinia
var infos=useInfoStore();

//下拉框
const finds=ref([{
      "Id": 0,
    "Name": ""
}])


//条件
const find=ref({
    name:"",
    levid:0,
    sex:null,
    pageindex:1,
    pagesize:2
})

//循环
const data=ref([{
    "Lname": "",
      "Id": 0,
      "Name": "",
      "Password": "",
      "HoubbyCount": 0,
      "HoubbyString": "",
      "img": "",
      "IsDelete": true,
      "MemberLevelId": 0,
      "Sex": true
}])



//翻页使用
const fysy=ref({
    totalnum:0,
    totalpage:0
})

//钩子
onMounted(() => {
    glq();
    xlk();
    Shows();
})

//下拉框
const xlk=()=>{
    axios.get("https://localhost:7165/api/Mem/GetLevelList").then(res=>{
        finds.value=res.data;
    })
}


//跳转
var touer=useRouter();

//判断是否登录
const glq=()=>{
    if(infos.find.name==""){
        alert("还没有登录");
        touer.push({path:"/DL"});
    }
}


//查询
const Shows=()=>{
    axios.get("https://localhost:7165/api/Mem/MemGet",{params:find.value}).then(res=>{
        data.value=res.data.list;
        fysy.value.totalnum=res.data.totalnum;
        fysy.value.totalpage=Math.ceil(fysy.value.totalnum/find.value.pagesize);
    })
}

//翻页
const FY=(cid:any)=>{
    if(cid>=1 && cid<=fysy.value.totalpage){
        find.value.pageindex=cid;
        Shows();
    }
}

//查询按钮
const listshow=()=>{
    find.value.pageindex=1;
    Shows();
}

//清空
const qk=()=>{
    find.value.name="";
    find.value.levid=0;
    find.value.sex=null;
    find.value.pageindex=1;
    Shows()
}


//全选 全取消
const qx=ref(false);
const ids=ref([]);
const qxqs=()=>{
    if(qx.value){
        data.value.forEach(e=>{
            ids.value.push(e.Id)
        })
    }else{
        ids.value=[];
    }
}

//批量删除
const Delps=()=>{
    if(confirm("确定要删除吗")){
    axios.get("https://localhost:7165/api/Mem/MemRangeDel",{params:{id:ids.value.toString()}}).then(res=>{
        if(res.data>0){
            alert("删除成功");
            qx.value=false
            Shows();
        }else{
            alert("删除失败");
            return;
        }
    })
}
}



//跳转
const GetUpt=(vid:any)=>{
    touer.push({path:"/Upt",query:{id:vid}});
}




</script>

<style scoped>

</style>